<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            margin: 0 0 0 30px;
            width: 300px;
        }

        h4 {
            background: rgb(255, 250, 232);
            padding: 8px 4px 0 20px;
            font-size: 13px;
            font-weight: bold;
            height: 30px;
            border-bottom: 1px solid #ecdfcc(157, 157, 157);
            cursor: pointer;
        }

        ul {
            height: 0;
            overflow: hidden;
            transition: all .3s linear;
        }

        ul li {
            padding-left: 30px;
            line-height: 30px;
            border: none;
            background-color: #FBF0D2;
            transition: all 1s ease 0s;
            color: blue;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        var data = [{
            title: "标题1",
            list: ["列表内容1", "列表内容2"],
            isShow: false, // 假设当前下拉没有显示

        }, {
            title: "标题2",
            list: ["列表内容1", "列表内容2", "列表内容3"],
            isShow: false,
        }, {
            title: "标题3",
            list: ["列表内容1", "列表内容2", "列表内容3", "列表内容4"],
            isShow: false,
        }, {
            title: "标题4",
            list: ["列表内容1", "列表内容2"],
            isShow: false,
        }, {
            title: "标题5",
            list: ["列表内容1", "列表内容2", "列表内容3"],
            isShow: false,
        },];

        var str = "";
        data.forEach(function (item) {
            //item得到数组内的每个元素
            str += `<div class = "list">
                <h4>${item.title}</h4>
                <ul>`;
            var str1 = "";
            for (var i = 0; i < item.list.length; i++) {
                str1 += `<li>${item.list[i]}</li>`;
            }
            console.log(str1);
            
            str += str1 + `</ul></div>`
        })


        var box = document.querySelector('.box');
        box.innerHTML = str;


        var h4s = document.querySelectorAll('h4');
        var uls = document.querySelectorAll('ul');
        for (let k = 0; k < h4s.length; k++) {
            h4s[k].onclick = function () {
                for (var m = 0; m < uls.length; m++) {
                    uls[m].style.height = '0';
                }
                var num = data[k].list.length * uls[k].children[0].offsetHeight;

                uls[k].style.height = num + "px";
            }
        }
    </script>
</body>

</html>